<template>
  <div class="page-container">
    <div class="share-manage">
      <div class="share-content">
        <ShareFilterHeader />
        <div class="share-main">
          <ShareList />
          <ShareStats />
        </div>
      </div>
    </div>
    <ShareDetailDrawer />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useShareStore } from '@/stores/shareStore'
import ShareFilterHeader from './components/ShareFilterHeader.vue'
import ShareList from './components/ShareList.vue'
import ShareStats from './components/ShareStats.vue'
import ShareDetailDrawer from './components/ShareDetailDrawer.vue'

const shareStore = useShareStore()

onMounted(() => {
  shareStore.initShareData()
})
</script>

<style lang="scss">
@import '@/styles/index.scss';

.share-manage {
  height: 100%;

  .share-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;

    @include respond-to('lg') {
      gap: 12px;
    }
  }

  .share-main {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 16px;

    @include respond-to('lg') {
      flex-direction: column-reverse;
      gap: 12px;
    }
  }
}
</style> 